import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';

type RootStackParamList = {
  Xuanze: undefined;
  Shouzhao: undefined;
  Youzhao: undefined;
};

type NavigationProp = NativeStackNavigationProp<RootStackParamList, 'Xuanze'>;

const ChooseRecoveryScreen = () => {
  const navigation = useNavigation<NavigationProp>();

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity style={styles.backBtn} onPress={() => navigation.goBack()}>
          <Text style={styles.backBtnText}>{'<'}</Text>
        </TouchableOpacity>
        <Text style={styles.headerTitle}>忘记密码</Text>
      </View>
      <View style={styles.optionsRow}>
        <View style={styles.optionWrapper}>
          <TouchableOpacity 
            style={[styles.circleBtn, {backgroundColor: '#6EC1FF'}]} 
            onPress={() => navigation.navigate('Shouzhao')}
          >
            <Image source={require('../../src/images/games/shouji.png')} style={styles.iconImg} />
          </TouchableOpacity>
          <Text style={styles.optionLabel}>通过手机找回</Text>
        </View>
        <View style={styles.optionWrapper}>
          <TouchableOpacity 
            style={[styles.circleBtn, {backgroundColor: '#5DE2C3'}]} 
            onPress={() => navigation.navigate('Youzhao')}
          >
            <Image source={require('../../src/images/games/youxiang.png')} style={styles.iconImg} />
          </TouchableOpacity>
          <Text style={styles.optionLabel}>通过邮箱找回</Text>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    height: 50,
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderBottomColor: '#f2f2f2',
    justifyContent: 'center',
    position: 'relative',
  },
  backBtn: {
    position: 'absolute',
    left: 10,
    top: 0,
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 10,
    zIndex: 1,
  },
  backBtnText: {
    fontSize: 18,
    color: '#bbb',
  },
  headerTitle: {
    fontSize: 18,
    color: '#222',
    fontWeight: '400',
    flex: 1,
    textAlign: 'center',
  },
  optionsRow: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 60,
    gap: 40,
  },
  optionWrapper: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  circleBtn: {
    width: 80,
    height: 80,
    borderRadius: 40,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 10,
  },
  iconImg: {
    width: 40,
    height: 40,
    resizeMode: 'contain',
  },
  optionLabel: {
    fontSize: 14,
    color: '#222',
    marginTop: 2,
  },
});

export default ChooseRecoveryScreen;
